<template>
  <div class="app-container">

    <el-card>
      <div slot="header" class="clearfix">
        <span>
          <el-form :inline="true" :model="filters">
           <!-- <el-form-item label="登录名">
              <el-input v-model="filters.username" placeholder="登录名" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="filters.displayName" placeholder="昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="filters.phone" placeholder="电话" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="组织">
              <el-input v-model="filters.departmentName" placeholder="组织" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
-->
            <el-form-item>
              <el-button type="success"  icon="el-icon-search" @click="handleSearch">查询</el-button>
              <el-button type="primary"  icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
            </el-form-item>
          </el-form>

        </span>
      </div>
      <div>
        <el-table stripe size="mini" fit border highlight-current-row :data="route" element-loading-text="拼命加载中" height="640" v-loading="loading" style="width: 100%;">

          <el-table-column min-width="50" align="center" label="#">
            <template slot-scope="scope">
              {{scope.$index +1}}
            </template>
          </el-table-column>

          <el-table-column prop="path" label="路径" width="110"  align="center" sortable>
          </el-table-column>
          <el-table-column  prop="serviceId" label="服务名" min-width="100" align="center">
          </el-table-column>

          <el-table-column prop="url" label="url代理" width="150"  align="center">
          </el-table-column>
          <el-table-column prop="stripPrefix" label="转发去掉前缀" width="150" header-align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.stripPrefix" disabled> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="retryable" label="是否重试"  width="150" header-align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.retryable" disabled> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sensitiveHeadersList" label="敏感请求头" align="center">
          </el-table-column>
          <el-table-column prop="delFlag" label="删除标识" width="100" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.delFlag" disabled> </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="enabled" label="是否可用" width="100"   align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.enabled" disabled> </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="200"
            header-align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="addOrUpdateHandle(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>


            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col style="margin-top: 13px">
            <div class="block">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="filters.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="filters.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="filters.total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="dialogFormVisible" @refreshDataList="search" ref="addOrUpdate"></add-or-update>



  </div>
</template>

<script>
  import {getZuulRouteListPage} from '@/api/config/zuul/';
  import AddOrUpdate from './addOrUpdate.vue'
  export default {
      name:'zuulRouteManage',
    data() {
      return {
        dialogFormVisible: false,
        dialogUpdatePassword: false,
        filters: {
          username: '',
          displayName:'',
          phone:'',
          page:1,
          total:0,
          limit:10,
        },
        value1:true,
        loading: false,
        route: [],

      }
    },
    components: {
      AddOrUpdate
    },
    methods: {
      addOrUpdateHandle(row){
        this.dialogFormVisible=true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row)
        })
      },


      handleSizeChange(val) {
        this.filters.limit = val;
        this.search();
      },
      handleCurrentChange(val) {
        this.filters.page = val;
        this.search();
      },
      handleSearch(){
        this.filters.total = 0;
        this.filters.page = 1;
        this.search();
      },
      //获取用户列表
      search: function () {
        let that = this;
        that.loading = true;
        getZuulRouteListPage(that.filters).then(function (response) {
         const result = response.data;
         that.route= [];
         that.filters.total = result.data.totalCount;
          result.data.list.forEach((item) =>{
           that.route.push(item);
         });
          that.loading = false;
        }).catch(function (error) {
          that.loading = false;
        });
      },

    },
    mounted() {
        this.search();
    }
  }
</script>

<style scoped>
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .table-header {
    background-color: #888888;
  }
</style>
